<template>
  <div>
    <!-- 顶部菜单栏 -->
    <nav class="header">
      <div class="left-menu">
        <a  class="menu-item" :class="{'active':activeMenu === 'salesCloudProductIndex'}" @click="goTo('saleIndex')">首页</a>
        <a  class="menu-item"  @click="goTo('saleProducts')">产品</a>
      </div>
      <div>
      <el-input placeholder="请输入搜索内容" v-model="input" clearable style="width: 240px;margin-right: 10px;">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" >搜索</el-button>
      </div>
      <div class="right-menu">
        <a  class="menu-item" v-if="!token"  @click="goTo('login')">登录</a>
        <a  class="menu-item" v-if="!token"  @click="goTo('register')">注册</a>
        <a   v-else>
          <el-dropdown >
            <span class="menu-item" >
              {{user}}
            </span>
            <el-dropdown-menu slot="dropdown" style="font-size: 16px !important;">
              <el-dropdown-item @click.native="handleLogout">退出</el-dropdown-item>
              <el-dropdown-item @click.native="goTo('')">后台管理</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </a>
      </div>
    </nav>


    <!-- 滚动 -->
    <div class="scrollable-content">
      <!-- 走马灯 -->
      <el-carousel  height="360px" indicator>
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index" >
        <img :src="item" alt="" style="height: 100%;width: 100%;">
        </el-carousel-item>
      </el-carousel>
      <h3 style="text-align: center;font-size: 36px;margin: 3%;">
        <img src="http://113.125.185.48:9000/bladex/upload/20240621/da1ee4bd56c7043250c9729cd540b894.png" alt="">  
        畅销产品
        <img src="http://113.125.185.48:9000/bladex/upload/20240621/c3f14b2aeea7add517bc94e60e9d95da.png" alt="">
      </h3>
<!-- 产品列表 -->
      <div>
        <div v-if="products.length">
        <el-row   style="margin-bottom: 2%;">
          <el-col  v-for="(item,index) in products" :key="index" style="width: 28%;margin-left: 4%;margin-bottom: 2%;">
            <div class="grid-content bg-purple">
              <el-card :body-style="{ padding: '0px' }">
                <div class="image-container" @mouseenter="hover = true" @mouseleave="hover = false" @click="goToDetail(item.id)">
                  <!-- 图片 -->
                  <img v-if="item.productImage != ''" :src="item.productImage" height="200px" width="100%">
                  <el-empty style="height: 200px;margin-bottom: 20px;display: block;text-align: center;" v-else>
                    <img src="http://113.125.185.48:9000/bladex/upload/20240624/53a2717bab52e273e639009b0779cf9c.png" height="160px" alt="">
                    <div style="font-size: 18px;color: #909399;">
                      暂无商品图片
                    </div>
                  </el-empty>
                  <div class="overlay" v-show="hover">
                    <el-link :underline="false" ><el-button style="background-color: rgba(0, 0, 0, 0);border: none;font-size: 18px" icon="el-icon-view" >查看详情</el-button></el-link>
                  </div>
                </div>
                  
                  <div style="text-align: center;padding-top: 10px;padding-bottom: 20px;">
                    <!-- 产品名称 -->
                    <h2 style="text-align: center;margin-bottom: 10px;display: inline;" >{{ item.productName }}</h2>
                    <el-tag color="#ff7a45" style="color: #fff;margin-left: 10px;margin-bottom: 10px;" >NEW</el-tag>
                    <!-- 产品简介 -->
                    <div style="margin-bottom: 10px;">{{item.productOneSentencIntroduction}}</div>
                    <!-- 产品价格 -->
                    <div style="height: 26px;width: 100%;margin-left: -4%;">
                      <div style="display: inline-block;color: rgba(255, 0, 0, 0.6);">折扣价：</div>
                      <div style="color: rgba(0,0,0,0.5);display: inline-block;text-decoration: line-through solid #a1a1a1;">{{ item.quotedPrice }} </div>
                      <div style="font-size: 20px;display: inline-block;margin-left: 8px;color: rgba(255, 0, 0, 0.6);font-weight: bold;">{{ item.discountPrice }} </div>
                    </div>
                    <!-- 销售量 -->
                    <!-- <div style="display: inline-block;margin-left: 20%;">
                      销售量：
                      <div style="color: rgba(0,0,0,0.5);display: inline-block;color: rgba(0, 0, 255, 0.6);font-size: 20px;">123</div>
                    </div> -->
                  </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: center;font-size: 20px;margin-bottom: 2%;">
          </el-pagination>
      </div>
        <el-empty style="height: 300px;margin-bottom: 100px;text-align: center;" v-else>

        </el-empty>
        
      </div>
      
      <div style="height: 100px;width: 100%;background-color: #000;text-align: center;font-size: 16px;color: #fff;">
        <!-- <img :src="require('@/assets/images/tu1.jpg')" alt="" style="height: 100%;width: 100%;"> -->
        <div style="padding-top: 40px;margin-bottom: 0;">版权所有：燎原第二小组©2024年</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
export default {
  data() {
    return {
      carouselItems: ['https://atom.189.cn/u/cms/www/202410/11164512cai6.jpg','https://atom.189.cn/u/cms/www/202409/19110104x6nq.jpg','https://atom.189.cn/u/cms/www/202409/19110609sjqz.jpg'],
      products:[],
      hover: false,
      activeMenu:"salesCloudProductIndex",
      currentPage: 1,
      total: 0,
      page: {
        current: 1,
        size: 3,
      },
      // params: {
      //   grade: '1'
      //   },
      user: "",
      token: "",
      input: ""
    }
  },
  created(){
    // this.onLoad(this.page,this.params);
    this.getUser();
  },
  methods: {
    // 顶部菜单栏
    goTo(item) {
       this.$router.push('/'+item);
       this.changeColor(item);
    },
    changeColor(index) {
      this.activeMenu = index;
    },
    onLoad(page, params = {}) {
      getList(page.current, page.size,params).then(res => {
        this.products = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    // 获取用户信息
    getUser(){
      this.user = this.$store.state.user.name;
      // console.log( this.$store.state.user.name)
      this.token = getToken() === undefined ? '' : getToken();
    },
    // 退出登录
    handleLogout() {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        localStorage.clear();
        this.$store.dispatch("LogOut").then(() => {
          location.reload();
          this.$router.push({ path: "/saleIndex" });
        });
      });
    },
    //查看详情
    // goToDetail(id){
    //   if(!this.token){
    //     this.$router.push({ path: "/salesCloudProductLogin" });
    //   }
    //   else{
    //     this.$router.push('/salesCloudProductMain?id='+id);
    //   }
      
    // },
    // 分页
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.page.size = val;
        this.page.current = 1;
        this.onLoad(this.page,this.params);
      },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.current = val;
      this.onLoad(this.page,this.params);
    },
    

  },
}
</script>

<style scoped>
/* 菜单 */
.header {
  background-color: white;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  height: 64px;
  z-index: 1000;
  font-size: 18px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
/* 移除所有虚线边框 */
*:focus {
  outline: none;
}
.menu-item {
  color: #1890ff;
  text-decoration: none;
  padding: 20px;
  transition: color 0.3s, background-color 0.3s;
  height: 100%;
  border: none;
}

.menu-item:hover{
  color: white;
  background-color: #1890ff;
}
.active {
  color: white !important;
  background-color: #1890ff !important;
}
.left-menu,
.right-menu {
  display: flex;
}


/* 滚动条 */
.scrollable-content {
height: calc(100vh - 64px);
overflow-y: auto;
}

.el-carousel h3 {
  color: #475669;
  font-size: 18px;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.image-container {
position: relative;
width: 100%;
height: 200px;
}


.image-container .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s ease;
}

.image-container:hover .overlay {
opacity: 1;
}
</style>
